<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <title>ECharts · BMap</title>
    <link href="../../../doc/asset/css/echartsHome.css" rel="stylesheet">
    <style type="text/css">
        body {
            margin: 0;
            padding: 50px;
        }

        pre {
            display: block;
            padding: 9.5px;
            margin: 0 0 10px;
            font-size: 13px;
            line-height: 1.42857143;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<h3>简介</h3>

<p>BMapExt是在Echarts基础上使用百度地图API进行地图绘制，使用的时候除了需要Echarts的相关知识外，还需要对百度地图API(<a target='_blank'
                                                                            href='http://developer.baidu.com/map/index.php?title=jspopular'>官网</a>)有所了解
</p>

<h3>实例方法</h3>
<table cellspacing="0" class="ADoc_table full">
    <tr>
        <th> 名称</th>
        <th> 参数</th>
        <th> 描述</th>
    </tr>
    <tr>
        <td><b>{HTMLElement}</b> getEchartsContainer</td>
        <td> 无</td>
        <td> 获取扩展为Echarts生成的容器</td>
    </tr>
    <tr>
        <td><b>{BMap.Map} </b> getMap</td>
        <td> 无</td>
        <td> 获取扩展使用的百度地图实例</td>
    </tr>
    <tr>
        <td><b>{ECharts}</b> initECharts</td>
        <td> 参数同Echarts实例的init</td>
        <td> 初始化echarts实例，参数完全使用<a target="_blank" href="../../../doc/doc.html#初始化">ECharts实例的init()</a>，
            返回扩展使用的Echarts实例
        </td>
    </tr>
    <tr>
        <td><b>{ECharts}</b> getECharts</td>
        <td> 无</td>
        <td> 获取扩展使用的Echarts实例</td>
    </tr>
    <tr>
        <td> setOption</td>
        <td> 参数同Echarts实例的setOption
        </td>
        <td>此方法会讲option中的series中的markPoint、markLine的坐标重新计算为与百度地图匹配的坐标，<a target="_blank"
                                                                         href="../../../doc/doc.html#实例方法">Echarts的实例方法</a>
        </td>
    </tr>
    <tr>
        <td> refresh</td>
        <td> 无</td>
        <td> 页面刷新</td>
    </tr>
    <tr>
        <td><b>{Array.&lt;number&gt;}</b> getMapOffset</td>
        <td> 无</td>
        <td> 获取扩展当前的地图偏移量</td>
    </tr>
    <tr>
        <td><b>{Array.&lt;number&gt;}</b> geoCoord2Pixel</td>
        <td><b>{Array.&lt;number&gt;}</b> geoCoord</td>
        <td> 经纬度坐标转换为像素坐标</td>
    </tr>
    <tr>
        <td><b>{Array.&lt;number&gt;}</b> pixel2GeoCoord</td>
        <td><b>{Array.&lt;number&gt;}</b> pixel</td>
        <td> 像素坐标转换成经纬度坐标</td>
    </tr>
</table>

<h3>如何使用</h3>

<p>1、引用Echarts、扩展、百度地图API</p>

<p>2、实例化扩展，传人容器、百度地图API的变量、echarts</p>

<p>3、获取扩展中使用的百度地图实例，进行地图操作</p>

<p>4、获取扩展生成Echarts容器</p>

<p>5、使用扩展初始化Echarts（initECharts），操作（setOption）</p>

<div class="code">
                        <pre>
        // 在这之前必须加装ECharts、百度地图API文件、引用扩展文件
        var myBMapExt = new BMapExt($('#main')[0], BMap, echarts);
        // 获取地图实例
        var map = myBMapExt.getMap();

        // 以下是地图的操作，详细api请前往百度地图API官网
        var startPoint = {
            x: 104.114129,
            y: 37.550339
        };
        var point = new BMap.Point(startPoint.x, startPoint.y);
        map.centerAndZoom(point, 5);
        map.enableScrollWheelZoom(true);
        // ....

        // 配置option
        var option = {...}
        // 获取echarts的dom容器
        var container = BMapExt.getEchartsContainer();
        // 通过initEcharts初始化echarts并获取实例
        var myChart = BMapExt.initECharts(container);
        // 设置option
        BMapExt.setOption(option);

                        </pre>
</div>
</body>
</html>
